<!doctype html>
<!--
 * This file is part of Cube.
 * https://shixincube.com
 * 
 * The MIT License (MIT)
 *
 * Copyright (c) 2020-2023 Cube Team.
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
-->
<html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="时信魔方示例,入门教程">
    <meta name="keywords" content="开源,开源软件,即时通信,IM,实时通信,团队协作,视频会议,音视频通话,SDK,多人协作,聊天软件,办公,WebRTC,RTC">
    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1">
    <meta name="mobile-web-app-capable" content="yes">
    <meta id="theme-color" name="theme-color" content="#ffffff">
    <base target="_blank">

    <title>时信魔方示例 - 基于群组的语音通话</title>

    <link rel="icon" sizes="192x192" href="../../images/favicon.png">
    <link rel="stylesheet" href="../../css/main.css">
    <link rel="stylesheet" href="css/main.css">
</head>

<body>
<div id="container">

    <h1><a href="../../" title="时信魔方示例">时信魔方示例</a> <span>基于群组的语音通话</span>
    </h1>

    <section id="blurb">
        <p>该示例演示如何在群组里发起并参与群组语音通话。</p>
    </section>

    <section id="contact">
        <div>
            <label for="contactId">账号ID：</label>
            <select id="contactId">
                <option value="300101">300101</option>
                <option value="300102">300102</option>
                <option value="300103">300103</option>
                <option value="300104">300104</option>
                <option value="300105">300105</option>
                <option value="300106">300106</option>
                <option value="300107">300107</option>
                <option value="300108">300108</option>
                <option value="300109">300109</option>
                <option value="300110">300110</option>
            </select>
        </div>
        <div>
            <label for="contactName">账号显示名：</label>
            <input id="contactName" value="武致远" readonly>
        </div>
        <div>
            <button id="login">登录</button>
            <button id="logout" disabled>登出</button>
        </div>
    </section>

    <section id="content">
        <div class="group">
            <div>
                <label for="groupName">群名称：</label>
                <input id="groupName" readonly>
            </div>
            <div>
                <label for="groupMembers" style="vertical-align:top;">群成员：</label>
                <select id="groupMembers" size="10">
                    <option value="300101">武致远 - 300101</option>
                    <option value="300102">邓雅云 - 300102</option>
                    <option value="300103">石季萌 - 300103</option>
                    <option value="300104">吴凝蕊 - 300104</option>
                    <option value="300105">罗文栋 - 300105</option>
                    <option value="300106">叶瑶华 - 300106</option>
                    <option value="300107">田宏茂 - 300107</option>
                    <option value="300108">风诗柳 - 300108</option>
                    <option value="300109">徐文石 - 300109</option>
                    <option value="300110">韶宁乐 - 300110</option>
                </select>
            </div>
        </div>

        <div class="participants">
            <div>
                <label for="participants" style="margin-bottom:8px;">参与者：</label>
                <div id="participants">
                    <!-- ## -->
                </div>
            </div>
        </div>

        <div class="local">
            <div>
                <label for="micVolume">麦克风音量：</label>
                <input id="micVolume" size="12" readonly>
            </div>
        </div>
    </section>

    <section id="tools">
        <div>
            <button id="initiate" disabled>发起群组通话</button>
            <button id="join" disabled>加入群组通话</button>
            <button id="quit" disabled>退出群组通话</button>
        </div>
        <div>
            <button id="switchMic" disabled>静音麦克风</button>
        </div>
        <div>
            <button id="statistics" disabled>显示/隐藏连接数据</button>
        </div>
    </section>

    <section>
        <div class="logs">
            <div>
                <label for="logs">日志：</label>
                <textarea id="logs" cols="100" rows="10" readonly></textarea>
            </div>
        </div>
    </section>
</div>

<div id="media-container">
    <video id="local" autoplay></video>
    <video id="remote" autoplay></video>
</div>

<div id="outboundStats" class="stats-box"></div>
<div id="inboundStats" class="stats-box"></div>

<script type="text/javascript" src="../../js/cube.js"></script>
<script type="text/javascript" src="../../js/helper.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
